<template>
  <div class="local-wrapper">
    <template v-for="localItem in localList" :key="localItem.imgUrl">
      <!-- <img src="http://dummyimage.com/88x31" alt="" /> -->
      <!-- <img :src="localItem.imgUrl" alt="" style="vertical-align: middle" /> -->
      <div class="local-item-box">
        <div class="local-name">
          {{ localItem.name }}
        </div>
        <van-image
          :src="localItem.imgUrl"
          lazy-load
          icon-size="70vw"
          fit="fill"
          width="91.46vw"
          height="51.2vw"
        >
          <div class="vedio-logo-box">
            <i>
              <svg focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 1024 1024"><path d="M836.906667 486.378667L325.696 139.498667A30.976 30.976 0 0 0 277.333333 165.077333V858.88a30.976 30.976 0 0 0 48.362667 25.642667l511.210667-346.88a30.976 30.976 0 0 0 0-51.264z" class=""></path></svg>
            </i>
          </div>
        </van-image>
      </div>
    </template>
    <!-- {{ localList }} -->
  </div>
</template>

<script setup>
import "@/mock/index.js";
import axios from "axios"; // 引入axios
import { ref, onMounted } from "vue";
import { getLocalRequest, getUserRequest } from "@/api/request";

const localList = ref([1]);

onMounted(() => {
  getLocalRequest().then((res) => {
    // url即在mock.js中定义的
    console.log(res);
    localList.value = res.data;
    console.log(localList.value); // 打印一下响应数据
  });
  // getUserRequest().then((res) => {
  //   // url即在mock.js中定义的
  //   // localList.value = res;
  //   console.log(res.data); // 打印一下响应数据
  // });
});
</script>

<style lang="scss" scoped>
@import "@/common/styles/index.scss";
.local-wrapper {
  .local-item-box {
    margin: px2vw(12) px2vw(16) 0;
    .van-image {
      position: relative;
      .vedio-logo-box {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: px2vw(-20);
        margin-top: px2vw(-20);
        display: flex;
        justify-content: center;
        align-items: center;
       
        
        &>i{
         
           width: px2vw(40);
          height: px2vw(40);
          border-radius: 50%;
          background-color: rgba(0,0,0,.5);
          display: flex;
        justify-content: center;
        align-items: center;
        }
       
      }
    }
  }
}
</style>